import { PageHeader, Button, Modal, Table, Form, Input } from "antd";
import {
    Loading3QuartersOutlined,
    CheckOutlined,
    ClockCircleOutlined,
    CaretRightOutlined,
    FormOutlined
} from "@ant-design/icons";
import { Link } from "react-router-dom";
import { useState } from "react";
import "./servertestapp.less"

const { Column } = Table;

const data = [
    {
        name: "测试1",
        apiName: "测试1",
        status: "testing",
        type: "批量",
        key: 1
    },
    {
        name: "测试1",
        apiName: "测试1",
        status: "finished",
        type: "批量",
        key: 2
    },
    {
        name: "测试1",
        apiName: "测试1",
        status: "wait",
        type: "批量",
        key: 3
    }
]

export function ServerTests() {
    return (
        <>
            <div style={{ backgroundColor: "#fff", marginLeft: 20, height: "100%" }}>
                <PageHeader
                    className="site-page-header"
                    title="测试集设置"
                    subTitle=""
                />
                <div style={{ margin: "0 20px" }}>
                    <div style={{
                        display: "flex",
                        justifyContent: "space-between",
                        marginBottom: 20
                    }}>
                        <div></div>
                        <AddTestSet></AddTestSet>
                    </div>
                    <Table dataSource={data} rowKey="key">
                        <Column title="名称" dataIndex="name"></Column>
                        <Column title="接口" dataIndex="apiName"></Column>
                        <Column
                            title="状态"
                            dataIndex="status"
                            render={(status) => {
                                switch (status) {
                                    case "testing":
                                        return <><Loading3QuartersOutlined spin className="loading-icon" /><span className="color-text">测试中...</span></>;
                                    case "finished":
                                        return <><CheckOutlined className="color-text finished" /><span className="color-text finished">测试完成</span></>
                                    case "wait":
                                        return <><ClockCircleOutlined /><span className="color-text">待测试</span></>
                                }
                            }}
                        ></Column>
                        <Column title="类型" dataIndex="type"></Column>
                        <Column
                            title="操作"
                            dataIndex="status"
                            render={(status) => {
                                return (
                                    <>
                                        <Button type="link" size="small" disabled={status==="testing"}><CaretRightOutlined /></Button>
                                        <Button type="link" size="small"><Link to="./testdetail"><FormOutlined /></Link></Button>
                                    </>
                                )
                            }}
                        ></Column>
                    </Table>
                </div>

            </div>
        </>
    )
}



function AddTestSet() {
    const [isModalVisible, setModalVisible] = useState(false);
    const [isLoading] = useState(false);
    const handleCancel = () => {
        setModalVisible(false);
    };
    const handleClickAdd = () => {
        setModalVisible(true);
    };
    const handleFinished = () => {


    }
    return (
        <>
            <Button
                onClick={handleClickAdd}
                type="primary"
            >
                添加测试
                </Button>
            <Modal
                title="添加测试集"
                visible={isModalVisible}
                onCancel={handleCancel}
                footer={[
                    <Button onClick={handleCancel} key="close">取消</Button>,
                    <Button
                        form="addTestSet"
                        type="primary"
                        loading={isLoading}
                        key="submit"
                        onClick={handleFinished}
                        htmlType="submit"
                    >
                        确定
                        </Button>
                ]}
                style={{ top: 300, width: 400 }}
            >
                <Form
                    labelCol={{ span: 5, offset: 1 }}
                    wrapperCol={{ span: 17 }}
                    name="addTestSet"
                >
                    <Form.Item
                        name="testSetName"
                        label="测试集名称"
                        rules={[{ required: true, min: 3, message: "最小应为3个字符" }]}
                    >
                        <Input></Input>
                    </Form.Item>
                </Form>
            </Modal>
        </>
    )
}